<template>
  <div class="feature-container">
    <h3>标注编辑</h3>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="当前zoom">
        <el-input :value="mapZoom" disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="所属类别">
        <el-input :value="getValue(editFeatureTab,'title')" disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="最小层">
        <el-input-number v-model="form.minzoom" size="small" :min="1" :max="25"></el-input-number>
      </el-form-item>
      <el-form-item label="最大层">
        <el-input-number v-model="form.maxzoom" size="small" :min="1" :max="25"></el-input-number>
      </el-form-item>
      <el-form-item label="经度">
        <el-input :value="form.longitude" disabled="disabled"></el-input>
      </el-form-item>
      <el-form-item label="维度">
        <el-input :value="form.latitude" disabled="disabled"></el-input>
      </el-form-item>
      <el-button type="primary" @click="openIconWindow"> 图标样式修改</el-button>
      <el-button type="danger" plain @click="deletePoint">删除</el-button>
      <el-button type="primary" @click="postPoints"> 提交</el-button>
    </el-form>

    <el-dialog title="图标样式" :visible.sync="editIcon">
      <el-form :model="icon" label-width="120px">
        <div class="image-context">
          <div class="image-container">
            <img v-for="item in featureIconList" :class="{'active':icon.landmarkIcon_id == item.id}" :key="item.id" :src="getIconUrl(item)" alt="" class="image-item" @click="changeActiveIcon(item)">
          </div>
        </div>
        <el-form-item label="图标宽度">
          <el-input v-model.number="icon.iconWidth"></el-input>
        </el-form-item>
        <el-form-item label="图标高度">
          <el-input v-model.number="icon.iconHeight"></el-input>
        </el-form-item>
        <el-form-item label="透明度(0-1)">
          <el-input v-model.number="icon.iconOpacity"></el-input>
        </el-form-item>
        <el-form-item label="旋转角度">
          <el-input v-model.number="icon.rotate"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editIcon = false">取 消</el-button>
        <el-button type="primary" @click="changeIcon">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import utils from '@/assets/js/utils.js'
import { mapGetters } from 'vuex'
import env from '@/assets/env'
export default {
  data() {
    return {
      editIcon: false,
      form: this.initForm(),
      icon: {}
    }
  },
  computed: {
    ...mapGetters(['editFeature', 'iconList', 'editFeatureTab', 'mapZoom']),
    featureIconList() {
      return this.iconList.filter(
        t => t.landmarkCat_id == this.form.landmarkMark_type
      )
    }
  },
  methods: {
    getValue(item, property) {
      if (item == null) return null
      return item[property]
    },
    deletePoint() {
      if (!this.editFeature) {
        this.$message.error('请先选择一个坐标点')
        return
      }
      this.$confirm('确定删除点位?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // console.log(this.editFeature)
          this.form._del(this.form)
        })
        .catch(() => {
          // 取消
        })
    },
    initForm() {
      return {
        id: 0,
        minzoom: 1,
        maxzoom: 25,
        longitude: 0,
        latitude: 0,
        iconWidth: 80,
        iconHeight: 60,
        iconOpacity: 1,
        rotate: 0,
        landmarkIcon_id: 1,
        landmarkMark_type: 1
      }
    },
    getForm(feature) {
      return {
        ...feature
      }
    },
    openIconWindow() {
      if (!this.editFeature) {
        this.$message.error('请先选择一个坐标点')
        return
      }
      this.editIcon = true
    },
    changeIcon() {
      this.form = {
        ...this.form,
        ...this.icon,
        width: this.icon.iconWidth,
        height: this.icon.iconHeight
      }
      this.editIcon = false
      this.form._update(this.form)
    },
    getIconUrl(icon) {
      return env.FILE_URL + icon.normal
    },
    changeActiveIcon(icon) {
      this.icon.landmarkIcon_id = icon.id
    },
    // 提交地图点位
    postPoints() {
      let points = window.pointList
      let features = points.map(t => {
        let data = t._data
        let feature = utils.getFeature(data)
        return feature
      })

      this.$http
        .postUrl('api/landmarkMarks?landmarkMap_id=' + utils.getMarkMapId(), {
          json: JSON.stringify(features)
        })
        .then(rst => {
          if (rst.code == 200) {
            this.$message.success(rst.msg)
          } else {
            this.$message.error(rst.msg)
            console.log(JSON.stringify(features), '提交')
          }
        })
    }
  },
  watch: {
    editFeature(val) {
      if (val != null) {
        this.form = this.getForm(window._editPoint._data)
        // let feature = utils.getFeature(val)
        // console.log(JSON.stringify(feature))
      }
    },
    editIcon(val) {
      if (val) {
        this.icon = {
          iconWidth: this.form.iconWidth,
          iconHeight: this.form.iconHeight,
          landmarkIcon_id: this.form.landmarkIcon_id,
          iconOpacity: this.form.iconOpacity,
          rotate: this.form.rotate || 0
        }
      }
    },
    'form.maxzoom'(val) {
      if (window._editPoint) {
        window._editPoint._data.maxzoom = val

        console.log(window._editPoint._data)
      }
    },
    'form.minzoom'(val) {
      if (window._editPoint) {
        window._editPoint._data.minzoom = val
        console.log(window._editPoint._data)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.feature-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}
.image-context {
  width: 100%;
  height: 150px;
  flex-shrink: 0;
  overflow: auto;
  .image-container {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    align-items: center;
    .image-item {
      margin-left: 10px;
      padding: 10px;
      height: 60px;
      border: 1px solid transparent;
      box-sizing: border-box;
      &.active {
        border: 1px solid orange;
      }
    }
  }
}
</style>
